<template>
    <div>
        <div class="detail" v-if="item.id">

            <Head tilte="账单详情"></Head>
            <div class="content">
                <div class="buy">
                    <i class="iconfont"
                        :class="[icons[item.type_name], item.pay_type === 1 ? 'expense' : 'income']"></i>
                    {{ item.type_name }}
                    <i>></i>
                </div>
                <div class="money">
                    {{ item.pay_type === 1 ? '- ' : '+ ' }}{{ item.amount }}
                </div>
                <div class="message">
                    <div class="title">
                        <span>记录时间</span>
                        <span>来源</span>
                        <span>备注</span>
                    </div>
                    <div class="detailMessage">
                        <span>{{ formateDate(new Date(Number(item.date)))[0] }}年{{ formateDate(new
                            Date(Number(item.date)))[1] }}月{{ formateDate(new Date(Number(item.date)))[2] }}日
                            {{ formateDate(new Date(Number(item.date))).slice()[3] }}:{{ formateDate(new
                                Date(Number(item.date)))[4] }}</span>
                        <span>手动添加</span>
                        <span>{{ item.remark }}</span>
                    </div>
                </div>
                <div class="bottom">
                    <div class="delete" @click="deleteDate(item.id)">
                        <i class="iconfont icon-ziyuanxhdpi"></i>
                        删除
                    </div>
                    <div class="update" @click="update">
                        <i class="iconfont icon-bianji"></i>
                        编辑
                    </div>
                </div>
            </div>
        </div>
    </div>
    <PopEdit ref="popEditRef" :billDetail="item" @onRefresh="onRefresh"></PopEdit>
</template>

<script setup>
import Head from '@/components/Head.vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import axios from '@/api/index.js';
import icons from '@/utils/icons.js';
import formateDate from '@/utils/date.js';
import PopEdit from '../components/PopAdd.vue';
import { showConfirmDialog, showSuccessToast} from 'vant';

const router = useRouter()
const route = useRoute();
const id = ref(route.query.id);
const item = ref({});
const popEditRef = ref();

// 点击删除，弹出确认框，点击确认，删除该条账单    post    /api/bill/delete   id=xxx
const getBillDetail = () => {
    axios.get(`/api/bill/detail?id=${id.value}`)
    .then(response => {
        item.value = response.data;
    })
}
getBillDetail();
const deleteDate = async (id) => {
    showConfirmDialog({
        title: '标题',
        message:'确定删除账单吗?',
    })
        .then(() => {
            axios.post('/api/bill/delete', {
                id
            })
            showSuccessToast('删除成功');
            router.back()
            //route.push('/home')
            console.log(1111);
        })
        .catch(() => {
            // on cancel
        });

}

const update = () => {
    popEditRef.value.show = true;
}

const onRefresh = () => {
    getBillDetail();
}
</script>

<style lang="less" scoped>
.detail {
    height: 100vh;
    background-color: rgb(239, 237, 237);

    .content {
        margin: 10px 20px;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;

        .buy {
            padding-top: 30px;
            display: flex;
            justify-self: center;
            align-items: center;
            font-size: 17px;

            .iconfont {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: auto 0;
                margin-right: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
            }

            .income {
                background-color: #f2b63b;
            }

            .expense {
                background-color: #37aa61;
            }
        }

        .money {
            text-align: center;
            font-size: 40px;
            padding: 20px 0;
        }

        .message {
            display: flex;
            margin-bottom: 30px;

            .title {
                display: flex;
                flex-direction: column;
                margin-right: 20px;

                span {
                    height: 30px;
                    font-size: 15px;
                    color: rgb(137, 132, 132);
                }
            }

            .detailMessage {
                display: flex;
                flex-direction: column;

                span {
                    height: 30px;
                    font-size: 15px;
                }
            }
        }

        .bottom {
            display: flex;
            border-top: 1px solid rgb(239, 239, 239);
            padding: 20px 0 0 0;

            .delete {
                flex: 1;
                text-align: center;
                font-size: 15px;
                color: red;
                border-right: 1px solid rgb(239, 239, 239);
            }

            .update {
                flex: 1;
                font-size: 15px;
                text-align: center;
            }
        }
    }
}
</style>